<template>
	<div
		ref="pageTable"
		class="page-table"
	>
		<div
			ref="tableInfo"
			class="tableInfo"
		>
			<el-table
				ref="elTable"
				:data="trueTableData"
				style="width: 100%"
				:default-sort="defaultSort"
				:highlight-current-row="highlightCurrentRow"
				:row-style="rowStyle"
				@row-click="rowClick"
				@selection-change="selectionChange"
				@clear-selection="clearSelection"
				@sort-change="sortChange"
			>
				<template v-for="(item, index) in headerData">
					<el-table-column
						v-if="!item.type"
						:key="index"
						:prop="item.prop"
						:label="item.label"
						:align="item.align"
						:header-align="item.headerAlign"
						:sortable="item.sortable"
						:type="item.type"
						:width="item.width"
						:fixed="item.fixed"
					>
						<template slot-scope="scope">
							<span
								v-if="!item.slot"
								v-tooltip="scope.row[item.prop]"
								class="ellipsis-span"
								>{{ scope.row[item.prop] }}</span
							>
							<slot
								v-if="item.slot"
								:name="item.slot"
								:data="scope.row"
								:index="scope.$index"
							/>
						</template>
					</el-table-column>
					<el-table-column
						v-if="item.type"
						:key="index"
						:prop="item.prop"
						:label="item.label"
						:align="item.align"
						:header-align="item.headerAlign"
						:sortable="item.sortable"
						:type="item.type"
						:width="item.width"
						:fixed="item.fixed"
					/>
				</template>
			</el-table>
			<el-table
				v-if="emptyTableData.length > 0"
				:data="emptyTableData"
				style="width: 100%"
				:show-header="false"
				:row-style="rowStyle"
			>
				<template v-for="(item, index) in headerData">
					<el-table-column
						:key="index"
						:prop="item.prop"
						:label="item.label"
						:align="item.align"
						:header-align="item.headerAlign"
						:width="item.width"
						:fixed="item.fixed"
					/>
				</template>
			</el-table>
		</div>
		<Pagination
			v-if="showPagination"
			:page-data="pageData"
			@handle-current-change="handleCurrentChange"
			@handle-size-change="handleSizeChange"
			@first-page="firstPage"
			@last-page="lastPage"
		/>
	</div>
</template>
<script>
	import Pagination from "./Pagination";
	export default {
		name: "PageTable",
		components: {
			Pagination,
		},
		props: {
			highlightCurrentRow: {
				type: Boolean,
				default: false,
			},
			tableData: {
				type: Array,
				default: () => {
					return [];
				},
			},
			headerData: {
				type: Array,
				default: () => {
					return [];
				},
			},
			pageData: {
				type: Object,
				default: () => {
					return {
						total: 0, // 总条数
						page: 0,
						pageSize: 10,
						totalPage: 0, // 总页数
					};
				},
			},
			showPagination: {
				type: Boolean,
				default: true,
			},
			defaultSort: {
				type: Object,
				default: () => {
					return {};
				},
			},
			cellKey: {
				type: String,
				default: "",
			},
			calculationHeightOption: {
				type: Object,
				default: () => {
					return {
						open: false,
						container: null,
						otherHeight: 0,
						minHeight: 40 * window.screenVwConstant.convertRate,
					};
				},
			},
		},
		data() {
			return {
				rowStyle: {},
				selectData: [],
			};
		},
		computed: {
			trueTableData() {
				let temp = [];
				let hasTypeCell = this.getHasTypeCell();
				this.tableData.map((item) => {
					if (!hasTypeCell || item[this.cellKey]) {
						temp.push(item);
					}
				});
				return temp;
			},
			emptyTableData() {
				let temp = [];
				let hasTypeCell = this.getHasTypeCell();
				this.tableData.map((item) => {
					if (hasTypeCell && !item[this.cellKey]) {
						temp.push(item);
					}
				});
				return temp;
			},
		},
		watch: {
			calculationHeightOption: {
				handler(val, oldVal) {
					this.calculationLineHeight();
				},
				deep: true,
			},
		},
		beforeDestroy() {
			this.$refs.pageTable = null;
			this.$refs.elTable = null;
			if (this.resizeTimer) clearTimeout(this.resizeTimer);
			window.removeEventListener("resize", this.windowResize);
		},
		mounted() {
			if (this.calculationHeightOption && this.calculationHeightOption.open) {
				window.addEventListener("resize", this.windowResize);
			}
			// console.log(this.pageData)
		},
		methods: {
			/**
			 * 刷新
			 */
			deleteRefresh() {
				console.log(this.selectData.length);
				console.log(this.trueTableData.length);
				if (this.selectData.length === this.trueTableData.length) {
					if (this.pageData.page === this.pageData.totalPage) {
						let jumpPage = Number(this.pageData.page) - 1;
						if (jumpPage < 0) {
							jumpPage = 0;
						}
						this.$emit("handle-current-change", jumpPage);
					} else {
						this.$emit("handle-current-change", this.pageData.page);
					}
				} else {
					this.$emit("handle-current-change", this.pageData.page);
				}
			},
			/**
			 * 跳转至第几页的操作
			 */
			handleCurrentChange(val) {
				this.$emit("handle-current-change", val);
			},
			/**
			 * 每页展示条数
			 */
			handleSizeChange(val) {
				this.$emit("handle-size-change", val);
			},
			/**
			 * 跳转到第一页
			 */
			firstPage() {
				this.$emit("first-page");
			},
			/**
			 * 跳转到最后一页
			 */
			lastPage() {
				this.$emit("last-page");
			},
			/**
			 * 排序
			 */
			sortChange(data) {
				this.$emit("sort-change", data);
			},
			/**
			 * 点击行的操作
			 */
			rowClick(data) {
				this.selectData = [];
				if (data.id && data.id !== undefined && data.id !== null) {
					this.selectData.push(data);
				}
				this.$emit("row-click", data);
			},
			/**
			 * 多选表格中 复选框选中事件
			 */
			selectionChange(data) {
				this.selectData = data.filter((item) => {
					return item[this.cellKey];
				});
				this.$emit("selection-change", this.selectData);
			},
			/**
			 * 清空复选框选中状态
			 */
			clearSelection() {
				this.$refs.elTable.clearSelection();
			},
			/**
			 * 查询是否有含type的列
			 */
			getHasTypeCell() {
				let hasTypeCell = false;
				this.headerData.forEach((item) => {
					if (item.type) {
						hasTypeCell = true;
					}
				});
				return hasTypeCell;
			},
			windowResize() {
				if (this.resizeTimer) clearTimeout(this.resizeTimer);
				this.resizeTimer = setTimeout(() => {
					if (this.resizeTimer) clearTimeout(this.resizeTimer);
					this.calculationLineHeight();
				}, 300);
			},
			/**
			 * 动态计算表格行高
			 */
			calculationLineHeight() {
				if (
					!this.calculationHeightOption.container ||
					!this.pageData.pageSize
				) {
					return;
				}
				let totalHeight = this.calculationHeightOption.container.offsetHeight;
				// console.log(totalHeight,this.$refs.tableInfo.offsetHeight)
				let lineHeight =
					(totalHeight -
						this.calculationHeightOption.otherHeight *
							window.screenVwConstant.convertRate -
						this.$refs.pageTable.querySelector("thead").offsetHeight) /
					this.pageData.pageSize;
				// console.log(lineHeight)
				if (
					lineHeight >
					(this.calculationHeightOption.minHeight *
						window.screenVwConstant.convertRate ||
						40 * window.screenVwConstant.convertRate)
				) {
					this.rowStyle = {
						height: lineHeight + "px",
					};
				} else {
					this.rowStyle = {
						height:
							(this.calculationHeightOption.minHeight *
								window.screenVwConstant.convertRate ||
								40 * window.screenVwConstant.convertRate) + "px",
					};
				}
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import "@/styles/page-table";
	.ellipsis-span {
		display: inline-block;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
